<template>
  <div id="orderlist" style="position: relative;">
          <el-table id="mytable" :data="orderdata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                <el-table-column label="订单时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span><span  class="see_span" @click="go_ordernumber(scope.row)"><i class="el-icon-view el-icon--right"></i></span>  
                    </template>
                </el-table-column>
                <el-table-column label="订单类别"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.level }}</span>
                    </template>
                </el-table-column>
                                <el-table-column label="订单价值"  align='center' >                   
                    <template slot-scope="scope">                   
                        <!-- <span >{{ scope.row.price }}</span> -->
                         <span >{{ scope.row.goods_price }}</span>
                    </template>
                </el-table-column> 
                <el-table-column label="产出账号"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                        <img src="@/assets/images/a9.png" v-if="scope.row.telphone"  style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.telphone)"/>
                    </template>
                </el-table-column>
 

                <el-table-column label="产出操作"  align='center'   >                   
                    <template slot-scope="scope">                   
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_MANUAL'">手动收获</span>
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_AUTO'">自动收获</span>
                        <span v-if=" scope.row.status == 'APPEALING'">自动收获</span>
                        <span v-if=" scope.row.status == 'GAMEOVER'">已完成</span>
                    </template>
                </el-table-column>

               
                 <el-table-column label="订单状态"  align='center'  >                   
                    <template slot-scope="scope">      
                        <span v-if="scope.row.displace == 0">             
                            <span v-if="scope.row.delivered == 1">已发货</span>
                            <span v-else>待发货</span>  
                        </span> 
                        <span v-if="scope.row.displace == 1">             
                            <span>已置换</span>  
                        </span> 
                    </template>
                </el-table-column>

               

                 <el-table-column label="操作" align='center' width="250px" fixed="right">
                    <template slot-scope="scope">
                        <span v-if="scope.row.delivered == 1">  
                            <el-button size="mini"  type="primary"  plain  class="button_class1" v-if="scope.row.delivered == 1" @click="add_fh_but(scope.row)">发货详情</el-button>
                        </span>
                        <span v-else-if="scope.row.displace == 1">  
                            <el-button size="mini"  type="primary"  plain  class="button_class2" v-if="scope.row.displace == 1" @click="zh_but(scope.row)">置换详情</el-button>
                        </span>
                        <span v-else >  
                            <el-button size="mini"  type="primary"  plain  class="button_class1"  @click="bh_but(scope.row.orderno)">驳回</el-button> 
                            <el-button size="mini"  type="primary"  plain  class="button_class2" v-if="scope.row.displace == 0"  @click="substitution_but(scope.row)">置换</el-button>
                            <el-button size="mini"  type="primary"  plain  class="button_class2" v-if="scope.row.displace == 1">置换详情</el-button>
                            <el-button size="mini"  type="primary"  plain  class="button_class1" v-if="scope.row.delivered == 0" @click="add_fh_but(scope.row)">发货</el-button> 
                            <el-button size="mini"  type="primary"  plain  class="button_class1" v-if="scope.row.delivered == 1" @click="add_fh_but(scope.row)">发货详情</el-button>
                        </span>

                    </template>
                </el-table-column>
  
            </el-table> 


    
  
  <!-- 置换 -->
    <el-dialog title="置换" :visible.sync="add_zh"  width="400px">
        <div style="width:100%;"> 
             <div class="title_box" style="margin-top:-30px;">
                <div class="dian"></div>
                <div class="title_name">置换信息</div>
            </div>
            <div class="box_top">
                    <div class="box_top_con">
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">置换数量:</div>
                            <div class="title_span2">
                                <span v-if="select_row.displace_price">{{ select_row.displace_price }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">置换时间:</div>
                            <div class="title_span2">
                                <span v-if="select_row.time">{{ select_row.time }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog title="发货" :visible.sync="add_fh"  width="600px">
        <div style="width:100%;"> 

            <div class="title_box" style="margin-top:-30px;">
                <div class="dian"></div>
                <div class="title_name">收货信息</div>
            </div>
            <div class="box_top">
                    <div class="box_top_con">
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收 货 人:</div>
                            <div class="title_span2">
                                <span v-if="select_row.address_finish !=0">{{ select_row.address_username }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">手 机 号:</div>
                            <div class="title_span2">
                                <span v-if="select_row.address_finish !=0">{{ select_row.address_telphone }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                        <div class="box_top_name" style="display:flex;">
                            <div class="title_span1">收货地址:</div>
                            <div class="title_span2">
                                <span v-if="select_row.address_finish !=0">{{ select_row.address_region }} {{ select_row.address_detail }}</span>
                                <span v-else>-</span>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="title_box" style="margin-top:20px;">
                <div class="dian"></div>
                <div class="title_name">商品信息</div>
            </div>

            <el-table :data="shop_data" style="width: 100%;height:150px;margin-top:10px;"  :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

              
                <el-table-column label="商品名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="规格"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="价格"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
  
            </el-table>

            <div class="title_box" style="margin-top:20px;">
                <div class="dian"></div>
                <div class="title_name">物流信息</div>
            </div>
           

           <div v-if="select_row.address_finish == 1">

                    <div class="box_top_con" style="margin-bottom:20px;" v-if="select_row.delivered == 1">
                            <div class="box_top_name" style="display:flex;">
                                <div class="title_span1">快递公司:</div>
                                <div class="title_span2">-</div>
                            </div>
                            <div class="box_top_name" style="display:flex;">
                                <div class="title_span1">快递单号:</div>
                                <div class="title_span2">-</div>
                            </div>
                    </div>
                
                    <div style="margin-top:20px;" v-if="select_row.delivered == 0">
                        <el-form ref="form"   label-width="80px" style="width:100%;">
                            <el-form-item label="发货价值">
                                <el-input v-model="fh_form.send_price" placeholder="发货价值"  style="width:200px;"></el-input>
                            </el-form-item> 
                            <el-form-item label="快递公司">
                                <el-input v-model="fh_form.express_company" placeholder="快递公司"  style="width:200px;"></el-input>
                            </el-form-item>    
                            <el-form-item label="快递单号">
                                <el-input v-model="fh_form.express_number" placeholder="快递单号"  style="width:200px;"></el-input>
                            </el-form-item>                                  
                        </el-form>

                        <div style="text-align: center;width:50%;margin:auto;margin-top:10px;">
                            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="fh_but_qr">确认</el-button>
                        </div>       
                    </div>

           </div>
           <div v-else style="height:50px;line-height:50px;text-align: center;">
                暂无收货地址
           </div>
           
        </div> 
    </el-dialog>


      <!-- 置换果米 -->
    <el-dialog :title="'置换' + variable_name1" :visible.sync="substitution_mtk"  width="400px">
        <div style="width:100%;"> 

        <el-form ref="form"   label-width="0px" style="width:100%;">
            <el-form-item label="">
                <el-input v-model="substitution_form.number" placeholder="数量"></el-input>
            </el-form-item>                                                                        
        </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="substitution_qr()">确认</el-button>
            </div>

        </div> 
    </el-dialog>


   </div>
</template>

<script>

export default {
   name: 'orderlist',
   props:{
      orderdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        add_fh:false,
        my_orderno:'',
        fh_form:{
           send_price:'',
           express_company:'',
           express_number:''
        },
        substitution_mtk:false,
        substitution_form:{
              number:''
        },
        shop_data:[{"name":"暂无"}],
        select_row:{},
        add_zh:false,
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 395
      
  },
  mounted (){
    
  },
  methods: {
 
    add_fh_but(row){
        this.add_fh = true
        this.select_row = row
        this.my_orderno = row.orderno
        this.fh_form.send_price = ''
        this.fh_form.express_company = ''
        this.fh_form.express_number = ''
    },
    fh_but_qr(){
         this.post("/order/deliver", {
                    orderno:this.my_orderno,
                    send_price:this.fh_form.send_price,
                    express_company:this.fh_form.express_company,
                    express_number:this.fh_form.express_number,
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.add_fh = false
                        this.$emit('up_list_fun')
                    }else {
                      this.open1(res.message,'warning')
                    }

             })
    },
    bh_but(orderno){  //是否驳回


       this.$confirm('是否驳回此订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
             this.post("/order/refuseHarvestRequest", {
                    orderno:orderno,
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

             })

        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消解冻'
        //   });          
        });

    },
    substitution_but(row){
        this.substitution_form.number = ''
        this.my_orderno = row.orderno
        this.substitution_mtk = true
    },
    substitution_qr(){

        this.$confirm('是否置换果米, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
              this.post("/order/displaceToKmb", {
                    orderno:this.my_orderno,
                    num:this.substitution_form.number
                }).then(res => {

                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    this.substitution_mtk = false
                    }else {
                    this.open1(res.message,'warning')
                }

             })

        }).catch(() => {
               
        });

    },
    zh_but(row){
         this.select_row = row
         this.add_zh = true
    },
    goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
     },
     go_ordernumber(row){
         this.$router.push({
          path: '/index/ordernumber',
          query: {
            pid:row.pid,
          }
        })
     }


  }
}
</script>


<style scoped>
   .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:10px;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_top_name{
        margin-top:10px;
    }
    .title_span1{
        width: 85px;
        text-align-last: justify;
        color:#5E6C84;
        font-size:16px;
    }
    .title_span2{
        color:#888888;
        padding-left: 10px;
        padding-top:2px;
    }
</style>